<template>
    <div>
        Hello interactjs {{  mouseType }}
        <ul class="draggable-container">
            <li :class="['draggable', { 'border-line': item.isSelected }]" data-x="0" data-y="0" v-for="(item, index) in dragList" :key="index" ref="draggableRef" @click="handleSelect(item, index)">
                <span class="mark-item" v-if="item.isSelected"></span>
                <div class="drag-resize-item">{{ item.name }}</div>
            </li>
        </ul>
        <!-- <div :class="['draggable', { 'border-line': isSelected }]" ref="draggableRef" @click="handleSelect">
             <span class="mark-item" v-if="isSelected"></span>
            <div class="drag-resize-item">Draggable Element 1</div>
        </div> -->
    </div>
</template>

<script setup>
    import { useElementMoveCoordinate, useElementResizable, useElementMoveOrResizable } from "./tools"

    const draggableRef = ref(null)
    const isSelected = ref(false)
    const mouseType = ref(null)

    const dragList = reactive([
        { name: 'Draggable Element 1', isSelected: false },
        { name: 'Draggable Element 2', isSelected: false },
        { name: 'Draggable Element 3', isSelected: false },
    ])

    // 缩放和拖拽合并
    const { origin, to } = useElementMoveOrResizable('.draggable')

    // 拖拽单独出发事件
    // const coordinate = useElementMoveCoordinate('.draggable')

    // 单独出发缩放事件
    // const { width, height } = useElementResizable('.resizable')

    function handleSelect(item, index) {
        // isSelected.value = !isSelected.value
        dragList.forEach(el => el.isSelected = false)
        item.isSelected = !item.isSelected
    }
</script>

<style lang="scss" src="./style.scss"></style>